<template>
  <div id="login-content">
    <div class="login-bg"></div>
    <div class="content">
      <div class="content-left">
        <div class="content-left-logo">
          <div class="logo">
            <img src="../../assets/images/login-logo.png"/>
            <img class="text" src="../../assets/images/login-text.png"/>
          </div>
          <div class="logo-right">
            <img src="../../assets/images/login-left-bg.png"/>
          </div>
        </div>
        <div class="logo-bottom">
          Copyright © 2024江西医至初病理诊断管理有限公司
        </div>
      </div>
      <div class="content-right">
        <div class="form-main">
          <div class="title">远程病理 全新体验</div>
          <base-form v-model:filter-config="formConfig"
                     v-model:filter-form="forms"
                     @getFormValue="handleGetFormValues"
                     @push-form-ref="handleRefDom">
          </base-form>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>

import BaseForm from "@/components/BaseForm/BaseForm.vue";
import {reactive, ref,h} from "vue"
import {getRules} from "@/utils/formRule"
import {cloneDeep} from "lodash-es"
import {ElButton} from "element-plus";

let baseForm = ref(null)
const handleRefDom = (e) => {
  baseForm.value = e
}
const forms = ref({
  username: "",
  password: "",
})
const state = reactive({
  loading:false,
})
const handleGetFormValues = (e) => {
  if (e.password) {
    e.password = e.password.replace(/[(\u4e00-\u9fa5)(，。（）【】{}！￥_……)]+/g, '')
  }
  forms.value = cloneDeep(e)
}
const formConfig = {
  elForm: {
    labelPosition: "top",
  },
  typeSetting: [[
    {
      component: 'input',
      vModel: 'username',
      formItem: {
        label: '',
        prop: "username",
        rules: getRules('input', '账号'),
      },
      elModel: {
        placeholder: "请输入账号",
        clearable: true,
        style:{
          height:"55px",
        },
        onChange: async (e) => {
        },
      },
      isHidden: () => false,
      disabled: () => false,
    },
    {
      component:'input',
      vModel:'password',
      formItem:{
        label:``,
        prop:"password",
        rules:getRules('input','密码')
      },
      elModel:{
        placeholder:`请输入密码`,
        type:'password',
        clearable:true,
        autocapitalize:"on",
        onPaste:(e)=>{
          e.preventDefault()
        },
        showPassword:true,
        style: {
          height:"55px",
        },
        onInput:(e)=>{

        },
        // slotScope:[{
        //   slotName:'suffix',
        //   render:(scope)=>{
        //     return h('img',{
        //       src:!isShow.value ? passShow : passHide,
        //       style:{
        //         width:"18px",
        //         height:"18px",
        //         cursor:"pointer",
        //         display:"block",
        //         float:"right",
        //       },
        //       onClick:()=>{
        //         isShow.value = cloneDeep(!isShow.value)
        //         formConfig.typeSetting[0][1].elModel.type = !isShow.value ? "password" : "text"
        //         isHide.value = true
        //         nextTick(()=>{
        //           isHide.value = false
        //         })
        //       }
        //     })
        //   }
        // }]
      },
      isHidden:()=> false,
      disabled:()=>false,
    },{
      component:()=>{
        return h("div",{
          style:{
            marginTop:"0px",
            fontSize:"14px",
            color:"#393939",
            cursor:"pointer",
            textAlign:"right",
          },
          onClick:()=>{

          }
        },[
          h('div','忘记密码？')])
      },
      col:{
        span:24,
      },
      isHidden:()=> false
    }
  ],()=>{
    return h(ElButton,{
      round:false,
      type:"primary",
      loading:state.loading,
      style:{
        width:"100%",
        height:"50px",
        fontSize:"18px",
        marginTop:"20px"
      },
      color:"#007BD3",
      onClick:()=>{
        let {validate} = baseForm.value
        validate(e=>{
          if(e){

          }
        })
      },
      disabled:false,
    },{default:()=> ("登录")})
  },()=>{
    return h(ElButton,{
      round:false,
      loading:state.loading,
      style:{
        width:"100%",
        height:"50px",
        fontSize:"18px",
        marginTop:"20px"
      },
      onClick:()=>{
        let {validate} = baseForm.value
        validate(e=>{
          if(e){

          }
        })
      },
      disabled:false,
    },{default:()=> ("扫码登录")})
  },[{
    component:()=>{
      return h("div",{
        style:{
          marginTop:"12px",
          fontSize:"14px",
          color:"#393939",
          cursor:"pointer",
          textAlign:"center",
        },
        onClick:()=>{

        }
      },[
        h('span','忘记账号？'),
        h('span',{
          style:{
            fontWeight:"bold"
          }
        },'请联系管理员')])
    },
    col:{
      span:24,
    },
    isHidden:()=> false
  }]]
}
</script>
<style lang="scss" scoped>
#login-content {
  width: 100vw;
  min-width: 1280px;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .login-bg {
    background: linear-gradient(45deg, rgba(59, 182, 254, 1) 0.4%, rgba(142, 76, 183, 1) 40.87%);
    left: -200px;
    top: -326px;
    width: 140%;
    height: 899px;
    line-height: 20px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    position: absolute;
    border-radius: 50%;
    z-index: -9;
  }

  .login-bg::before {
    content: "";
    display: block;
    width: 320px;
    height: 320px;
    border: 1px solid #12588F;
    position: fixed;
    border-radius: 50%;
    top: -200px;
    right: -200px;
  }

  .login-bg::after {
    content: "";
    display: block;
    width: 240px;
    height: 240px;
    border: 1px solid #12588F;
    position: fixed;
    right: -160px;
    border-radius: 50%;
    top: -160px;
  }

  .content {
    width: 1040px;
    height: 600px;
    display: flex;
    margin: 0 auto;
    margin-top: calc((100vh - 600px) / 2);
    position: relative;

    .content-left {
      width: 50%;
      background: linear-gradient(180deg, rgba(0, 123, 211, 1) 0%, rgba(3, 67, 115, 1) 100%);
      border-radius: 50px;
      z-index: 2;

      .content-left-logo {
        display: flex;
        place-items: center;
        height: 540px;
      }

      .logo {
        width: 279px;
        text-align: center;
        margin-left: 40px;
        margin-right: 40px;
        z-index: 1;

        img {
          width: 220px;
        }

        .text {
          margin-right: -40px;
          margin-top: -20px;
        }
      }

      .logo-right {
        z-index: 1;

        img {
          width: 280px;
        }
      }

      .logo-bottom {
        color: #fff;
        text-align: center;
        font-size: 12px;
        z-index: 2;
      }
    }

    .content-right {
      width: calc(1040px * 0.5 + 40px);
      height: 560px;
      background: #fff;
      margin-top: 20px;
      margin-left: -40px;
      border-radius: 0 50px 50px 0;
      border: 1px solid rgba(232, 232, 232, 1);
      z-index: 1;
      .form-main {
        width: 320px;
        margin-left: auto;
        margin-right: 40px;
        margin-top: 40px;
        z-index: 99;
        .title{
          text-align: center;
          margin-bottom: 20px;
          font-size: 36px;
          color: rgb(27,45,67);
          font-family: SourceHanSansSC-bold;
        }
      }
    }

    .content-left::after {
      content: "";
      width: 400px;
      height: 600px;
      display: block;
      background: inherit;
      border-radius: 0 50% 50% 0;
      position: absolute;
      margin-left: calc(1040px * 0.6 - 400px);
      z-index: -1;
      top: 0;
    }
  }

  .content::after {
    content: "";
    width: 600px;
    height: 4px;
    background: #fff;
    position: absolute;
    transform: rotate(-45deg);
    right: 0;
    bottom: 500px;
    z-index: -7;
  }
}

#login-content::before {
  content: "";
  display: block;
  width: 320px;
  height: 320px;
  border: 1px solid #12588F;
  position: fixed;
  border-radius: 50%;
  bottom: -120px;
  left: -120px;
}

#login-content::after {
  content: "";
  display: block;
  width: 240px;
  height: 240px;
  border: 1px solid #12588F;
  position: fixed;
  left: -80px;
  border-radius: 50%;
  bottom: -80px;
}
</style>